<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset="utf-8">

  <link href="/css/phylotree.css" rel="stylesheet">

  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <link rel="stylesheet" href="/css/bootstrap-theme.min.css">

  <script src="/js/jquery.js"></script>
  <script src="/js/bootstrap.min.js"></script>
  <script src="/js/d3.v3.min.js"></script>
  <script src="/js/underscore-min.js"></script>
  <script src="/phylotree.min.js"></script>
  <style>
#code {
  display: inline-block;
  width: 700px;
  padding-left: 50px;
}
.axis {
  font: 12px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  stroke-width: 2px;
}
  </style>
</head>
</head>

<body>
  <svg id="tree" width=500 height=500></svg>
  <svg id="viz"></svg>
  <script>
d3.json('substitution-counts.json', (err, data) => {
  // D3 bar chart
  var padding = { top: 20, bottom:20, right:20, left: 75 },
    width = 300 - padding.left - padding.right,
    height = 500 - padding.top - padding.bottom;

  var svg = d3.select('#viz')
    .attr('width', width+padding.left+padding.right)
    .attr('height', height+padding.top+padding.bottom)
    .append('g')
      .attr('transform', 'translate(' + padding.left + ',' + padding.top + ')');

  var x_scale = d3.scale.ordinal()
    .domain(['Nonsynonymous', 'Synonymous'])
    .rangeRoundBands([0, width], .3);

  var synonymous_counts = _.pluck(_.values(data), 'synonymous_counts')
    .reduce((a,b)=>a+b, 0),
    nonsynonymous_counts = _.pluck(_.values(data), 'nonsynonymous_counts')
    .reduce((a,b)=>a+b, 0);

  var y_scale = d3.scale.linear()
    .domain([0, Math.max(synonymous_counts, nonsynonymous_counts)])
    .range([height, 0]);

  var x_axis = d3.svg.axis()
    .orient('bottom')
    .scale(x_scale);

  var y_axis = d3.svg.axis()
    .orient('left')
    .scale(y_scale);

  svg.append('g')
    .attr('class', 'axis')
    .attr('transform', 'translate(0,' + height + ')')
    .call(x_axis);

  svg.append('g')
    .attr('class', 'axis')
    .call(y_axis);

  var y_label_x = -35,
    y_label_y = height/2;
  svg.append('text')
    .attr('x', y_label_x)
    .attr('y', y_label_y)
    .attr('transform', 'rotate(-90 ' + y_label_x + ',' + y_label_y + ')')
    .attr('text-anchor', 'middle')
    .text('Inferred substitutions');

  svg.selectAll('.axis-line')
    .data(d3.range(10, 181, 10))
    .enter()
    .append('line')
      .attr('x1', 1)
      .attr('x2', width)
      .attr('y1', y_scale)
      .attr('y2', y_scale)
      .attr('stroke', (d, i) => i%2 == 1 ? 'lightgrey' : 'WhiteSmoke');

  svg.selectAll('.bar')
    .data([
      {category: 'Nonsynonymous', value: nonsynonymous_counts},
      {category: 'Synonymous', value: synonymous_counts}
    ])
    .enter()
    .append('rect')
      .attr('class', 'bar')
      .attr('x', d=>x_scale(d.category))
      .attr('y', d=>y_scale(d.value))
      .attr('width', x_scale.rangeBand())
      .attr('height', d=>Math.max(height-y_scale(d.value)-1, 0))
      .attr('fill', d=>d.category=='Nonsynonymous' ? 'pink' : 'lightblue');

  svg.selectAll('.update-bar')
    .data([
      {category: 'Nonsynonymous', value: 0},
      {category: 'Synonymous', value: 0}
    ])
    .enter()
    .append('rect')
      .attr('class', 'update-bar')
      .attr('x', d=>x_scale(d.category))
      .attr('y', d=>y_scale(d.value))
      .attr('width', x_scale.rangeBand())
      .attr('height', d=>height-y_scale(d.value))
      .attr('fill', d=>d.category=='Nonsynonymous' ? 'red' : 'blue');





  // Phylotree
  d3.text('Flu.new', function(error, newick) {
    var tree = d3.layout.phylotree()
      .svg(d3.select("#tree"))
      .options({
        'left-right-spacing': 'fit-to-size',
        'top-bottom-spacing': 'fit-to-size'
      })
      .size([500, 500]);
    tree(newick)
      .layout();

    tree.selection_callback(selection=>{
      var names = selection.map(d=>d.name),
        reduced_data = _.mapObject(data, (val, key) => names.indexOf(key) >= 0 ? val : {synonymous_counts: 0, nonsynonymous_counts: 0});
      var synonymous_counts = _.pluck(_.values(reduced_data), 'synonymous_counts')
        .reduce((a,b)=>a+b, 0),
        nonsynonymous_counts = _.pluck(_.values(reduced_data), 'nonsynonymous_counts')
          .reduce((a,b)=>a+b, 0);
      svg.selectAll('.update-bar')
       .data([
         {category: 'Nonsynonymous', value: nonsynonymous_counts},
         {category: 'Synonymous', value: synonymous_counts}
       ])
       .transition()
       .duration(500)
         .attr('y', d=>y_scale(d.value))
         .attr('height', d=>Math.max(height-y_scale(d.value)-1,0));
    });
  });
  
})
  </script>

</body>

</html>
